<template>
    <el-table :data="adminList" stripe style="width: 100%" v-loading="loading">
      <el-table-column prop="adminid" label="管理员编号" width="360" />
      <el-table-column prop="adminname" label="账户" width="180" />
      <el-table-column prop="role" label="角色" width="180">
        <template #default="scope">
            <span>{{scope.row.role==1?"超级管理员":"普通管理员"}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="操作" width="180">
        <template #default="scope">
            <el-popconfirm title="是否删除" @confirm="deleteAdmin(scope.row.adminid)">
        <template #reference>
            <el-button type="info" color="red" v-if="crud.charAt(3)==='1'">删除</el-button>
        </template>
        </el-popconfirm>
        <el-button type="primary" @click="editShowFn(scope.row.adminname)" v-if="crud.charAt(2)==='1'">修改</el-button>
        </template>
    </el-table-column>
    </el-table>
    <Edit v-show="isShowEdit" @hide="hideFn" :adminname="editAdminName" @updatesuccess="successFn" ></Edit>
  </template>
  
  <script lang="ts" setup>

import { ElMessage, ElMessageBox } from 'element-plus'
import service from '../../../untils/service';
import { reactive,ref } from "vue";
import 'element-plus/dist/index.css';
import Edit from '../Admin/Edit.vue'
import {useRoute} from "vue-router";

let loading = ref(true)
const $route = useRoute();
const crud:string = ($route.meta.crud as string);

  // 发请求获取管理员信息
    interface IAdmin {
        adminname:string,
        password:string,
        role:number,
        adminid:string,
        checkedKeys:string[]
    }

    const adminList = reactive<IAdmin[]>([])
    const getAdminList = ()=> {
        service({
            url:'/admin/list'
        }).then(res=>{
            if(res.data.code == '200') {
                 adminList.length = 0
                 adminList.push(...res.data.data)
                 console.log(res.data.data)
                 loading.value = false
            }
        })
    }

    getAdminList()
// 获取删除管理员信息

const deleteAdmin=(adminid:string)=>{
    service({
        url:'admin/delete',
        method:'post',
        data:{
            adminid
        }
    }).then(res=>{
        if(res.data.code == '200') {
            ElMessage({
                message:'删除成功',
                type:'success'
            })
            getAdminList();
            
        }
        
    })
}
const isShowEdit = ref(false);  //用来定义修改弹出框的显示和隐藏
const editAdminName = ref("");  //要修改的 管理员姓名

const editShowFn=(adminname:string)=>{
    editAdminName.value = adminname;
    isShowEdit.value=true;
}


const hideFn=()=>{
    isShowEdit.value = false;
}


// 当修改成功后，需要重新发送请求，获取最新数据
const successFn = ()=>getAdminList();
  </script>

  <style scoped>
  
  </style>
  